<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
                <view class="left">
                    <!-- 如果能获取存储的登录信息就数据库的昵称 -->
                    <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
                        {{business.nickname}}
                    </view>

                    <!-- 如果没有获取到就会显示微信昵称 -->
                    <open-data v-else type="userNickName" class="nickname"></open-data>
                </view>
                <view class="right">
                    <view class="avatar xcx">
                        <u-avatar :src="business.avatar_text" size="90" v-if="JSON.stringify(business) !== '{}'"></u-avatar>

                        <!-- 如果没有获取到就会显示微信头像 -->
                        <open-data type="userAvatarUrl" v-else></open-data>
                    </view>
                </view>
            <!-- #endif -->

            <!-- H5 -->
			<!--  #ifdef H5 || APP-PLUS -->
            <view class="left">
                    <view class="nickname" v-if="JSON.stringify(business) !== '{}'">
                        {{business.nickname}}
                    </view>
                    <view class="nickname" v-else>
                        请选登陆
                    </view>
            </view>

            <view class="right">
                <view class="avatar">
                    <u-avatar :src="business.avatar_text" size="90" v-if="JSON.stringify(business) != '{}'"></u-avatar>
                    <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
                </view>
            </view>
			<!-- #endif -->
        </view>

        <view class="menu" v-if="JSON.stringify(business) !== '{}'">
            <view class="item" hover-class="checkActive" @click="ToProduct">
                <view class="title">产品防伪管理</view>
                <u-icon name="arrow-right"></u-icon>
            </view>

            <!--  #ifdef MP-WEIXIN -->
            <view class="item" hover-class="checkActive" @click="onUnbinding">
                <view class="title">解除绑定账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <!-- #endif -->

            <view class="item" hover-class="checkActive" @click="OnLogout">
                <view class="title">退出账号</view>
                <u-icon name="arrow-right"></u-icon>
            </view>
        </view>

        <view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" icon="weixin-circle-fill" @click="onLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 || APP-PLUS -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>

        <!-- 提醒组件 -->
        <u-toast ref="notice" />

        <!-- 模态框 -->
        <u-modal :show="show" :content='content' showCancelButton @confirm="ModalConfirm" @cancel="show = false"></u-modal>
    </view>
</template>
<script>
export default {
    onShow()
    {
        //获取本地存储
        var business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

        // 判断对象是否为空
        if(Object.getOwnPropertyNames(business).length > 0) this.business = business
    },
    data() {
        return {
            show: false,
            content: '是否确认退出',
            action: '',
            business:{
                // id: 1,
                // nickname:'demo'
            }
        }
    },
    methods: {
        onLogin()
        {
            //调用第三方登录接口
            // uni.login == wx.login
            uni.login({
                provider: 'weixin', //微信登录
                success: async (LoginRes) => 
                {
                    var code = LoginRes.code ? LoginRes.code : ''
                    
                    if(!code)
                    {
                        this.$refs.notice.show({
                            type: 'error',
                            message: '临时凭证获取失败'
                        })
                        return false
                    }

                    //发送请求
                    var result = await uni.$u.http.post('/business/login', {code})

                    if(result.code == 0)
                    {
                        this.$refs.notice.show({
                            type: 'error',
                            message: result.msg
                        })

                        return false
                    }

                    //判断是否有action这个选项
                    var action = result.data.action ? result.data.action : '';
                    var openid = result.data.openid ? result.data.openid : '';

                    //成功提醒
                    this.$refs.notice.show({
                        type:'success',
                        message: result.msg,
                        complete: () =>
                        {
                            //授权成功，但是无绑定账号
                            if(action == "bind")
                            {
                                uni.$u.route({
                                    url: 'pages/business/bind',
                                    params: {
                                        openid: openid
                                    }
                                })
                                return;
                            }else
                            {
                                //直接找到了用户
                                //存储本地存储
                                uni.setStorageSync('business', result.data)

                                //修改一下data数据
                                this.business = result.data
                            }
                        }
                    })




                },
                fail: () => {}
            })
        },
        //web登录
        toLogin()
        {
            this.$u.route('pages/business/login');
        },
        ToProduct()
        {
            this.$u.route('pages/business/list');
        },
        ModalConfirm()
        {
            this.show = false

            if(this.action == 'logout')
            {
                this.LogoutConfirm()
            }else if(this.action == 'unbind')
            {
                this.UnbindingConfirm()
            }
        },
        //退出
        OnLogout()
        {
            this.show = true
            this.content = '是否确认退出账号'
            this.action = 'logout'
        },
        LogoutConfirm()
        {
            //清空本地存储
            uni.clearStorageSync()

            this.business = {}
        },
        //解除绑定
        onUnbinding()
        {
            this.show = true
            this.content = '是否确认解除绑定账号';
            this.action = 'unbind'
        },
        async UnbindingConfirm()
        {
            //发送请求
            var result = await uni.$u.http.post('/business/unbind', {busid: this.business.id})

            if(result.code == 0)
            {
                this.$refs.notice.show({
                    type: 'error',
                    message: result.msg
                })

                return false
            }else
            {
                //直接做一个退出登录动作
                this.LogoutConfirm()

                this.$refs.notice.show({
                    type:'success',
                    message: result.msg
                })
            }
        }
    }
}
</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.user{
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu{
    background-color: #fff;
    margin-top: 10px;
}

.menu .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive{
    background-color: rgba(233, 233, 233, 0.5);
}
</style>